<template>
  <header class="header">
    <h1>天津蔚动科技</h1>

    <div class="navigation-bar">
      <NuxtLink class="tab-item" v-for="item in tabs" :to="item.path">
        <span>{{ item.text }}</span>
      </NuxtLink>
    </div>
  </header>
  <div style="height: 120px"></div>
</template>
<script setup>
const tabs = ref([
  {
    text: "首页",
    path: "/",
  },
  {
    text: "公司简介",
    path: "/intro",
  },
  {
    text: "产品中心",
    path: "/product-center",
  },
  {
    text: "成功案例",
    path: "/case",
  },

  {
    text: "服务支持",
    path: "/article",
  },
  {
    text: "联系我们",
    path: "/relation",
  },
]);

const clickTab = (path) => {
  console.log("clickTab: ", path);
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* x偏移量 y偏移量 模糊半径 阴影颜色 */
  box-sizing: border-box;
  padding: 0 18px;
  z-index: 99;
  background-color: #fff;

  h1 {
    color: $primary;
  }

  .navigation-bar {
    margin-left: auto;
    display: flex;

    .tab-item {
      padding: 0 14px;
      line-height: 120px;
      height: 120px;
      color: #2b2b2b;
      cursor: pointer;
      font-size: 15px;
    }
    .tab-item:hover {
      color: $primary;
    }
  }
}
</style>
